import React from "react";
import { message, Radio  } from 'antd';
import { Modal  } from 'fly';
import PackTradeApply from "./PackTradeApply";
import ReactKey from "../../../util/ReactKey";
import DetailUploadModal from "./DetailUploadModal";
import DelQiniuFileMutation from "./mutation/DelQiniuFileMutation";
import Relay from "react-relay";
import Util from "../../../util/Util";
const RadioGroup = Radio.Group;


export default class Modal_PayFor extends React.Component{
    constructor(props){
        super(props);
        this.state={
            visible:false,
            instructions: [],
            value: '',
            radioValue: '',
            psFlag: false
        }
        this.instructions = [];
    }

    componentWillMount(){

    }
    _onCancel(){
        this.setState({
            visible:false,
            instructions: [],
            psFlag: false,
            radioValue: '',
            value: ''
        });
        this.instructions = [];
        this.refs.tnum.value = ''
    }

    delqiniufile(item, fileKye) {
        Relay.Store.commitUpdate(
            new DelQiniuFileMutation({
                fileKey: fileKye
            }),
            {
                onFailure: () => {

                },
                onSuccess: (response) => {
                    let errorCode = response.delQiniuFile.delQiniuFile.errorCode;
                    if (errorCode == 0) {
                        Util.removedarrayitem(this.instructions, item);
                        this.setState({
                            instructions: this.instructions
                        });
                    }
                }
            }
        )
    }

    attach() {
        return this.state.instructions.map((item, index)=> {
            return (
                <PackTradeApply key={ReactKey.key} item={item} delqiniufile={this.delqiniufile.bind(this)} type={'accessory'}/>
            );

        })
    }

    addinstructions() {
        if (this.instructions.length >= 5) {
            message.config({
                top: 30,
            })
            message.info('不能超过5个');
            return
        }
        this.refs.deup.setState({
            visible: true
        });
    }

    addpact(name, hash, url, fileKey,sid) {
        this.instructions.push({"name": name, "hash": hash, "url": url, "fileKey": fileKey,"sid":sid});
        this.setState({
            instructions: this.instructions
        });
    }

    changeInput(event) {
      if (event.keyCode == 32 || event.target.value.indexOf(' ')> 0 || event.target.value==' ') {
        return
      }
      this.setState({
        value: event.target.value
      })

    }

    _OnSure(){
        const { radioValue, value } = this.state
        let instructions =[];
        this.state.instructions.map((context)=>{
            if(context.sid){
                instructions.push(context.sid);
            }else{
                instructions.push('');
            }
        });
        if (radioValue === '') {
            message.info('请选择结算方式');
            return;
        }
        if(value == ''){
            message.info('合同编号为必填项');
            return;
        }
        if(instructions.length==0){
            message.info('合同附件为必填项');
            return;
        }
        this.props.SingOrderCallBack(radioValue, value, instructions);
    }

    onChange = (e) => {
        if (e.target.value == '1') {
            this.setState({
                psFlag: true,
                radioValue: e.target.value,
            })
        } else {
            this.setState({
                psFlag: false,
                radioValue: e.target.value,
            })
        }
    }

    render(){
        return (
            <Modal
              title={'签订合同'}
              okText='确定'
              maskClosable={true}
              // footer={null}
              onOk={()=>this._OnSure()}
              visible={this.state.visible}
              className="mycenter_edit--info close_style_modal"
              onCancel={this._onCancel.bind(this)}
            >
                <p className="signmodal_radio" style={{paddingLeft: '40px'}}><span style={{color:"red",marginRight:10}}>*</span>是否通过平台结算:&nbsp;
                    <RadioGroup onChange={this.onChange} value={this.state.radioValue}>
                        <Radio value={1}>通过平台结算</Radio>
                        <Radio value={0}>不通过平台结算</Radio>
                    </RadioGroup>
                </p>
                <br/>
                {
                  this.state.psFlag ? (
                    <p style={{color: 'red',width:'400px',lineHeight:'24px',paddingLeft: '40px'}}>选择通过平台结算的情况下，请在合同中添加以下文字：甲乙双方同意平台的代付款协议条款；</p>
                  ) : null
                }
                <p style={{height: 58, paddingLeft: "40px", lineHeight: "58px",position:"relative",marginTop:"10px"}}>
                    <span style={{color:"red",marginRight:10}}>*</span>
                    合同编号：
                    <input className="order_detail_part_modal_contract_input" value={this.state.value} onkeyup={this.state.value=this.state.value.replace(/^ +| +$/g,'')} onChange={this.changeInput.bind(this)} ref={'tnum'}/>
                </p>


                <div style={{minHeight: 0, marginLeft: "40px", marginTop: "20px",overflow:"hidden"}}>
                    <span style={{color:"red",marginRight:10}}>*</span>
                    合同附件：

                    <span className="order_detail_part_modal_addContr" onClick={this.addinstructions.bind(this)}>添加附件</span>
                    <div>
                        {
                            this.attach()
                        }
                    </div>
                </div>

                {/*<div className="order_detail_part_modal_contract_sure_div" onClick={this._OnSure.bind(this)}>确定</div>*/}

                <DetailUploadModal ref={'deup'} addpact={this.addpact.bind(this)} mid={'creat'}/>
            </Modal>
        )
    }
}
